<!-- 分栏布局 -->
<template>
  <section class="admin-ui-wrapper">
    <div class="admin-ui-side-split">
      <div class="admin-ui-side-split-top">
        <router-link :to="$CONFIG.HOME_URL">
          <img class="logo" :title="$CONFIG.APP_NAME" src="@/assets/images/logo-r.png" />
        </router-link>
      </div>
      <div class="admin-ui-side-split-scroll">
        <el-scrollbar>
          <ul>
            <li
              v-for="item in menuList"
              :key="item.path"
              :class="{ active: splitActive === item.path || `/${splitActive.split('/')[1]}` === item.path }"
              @click="changeSubMenu(item)"
            >
              <el-icon><component :is="item.meta.icon ?? `el-icon-menu`" /></el-icon>
              <p>{{ item.meta.title }}</p>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
    <div
      v-if="subMenuList.length > 0 || !currentTopMenu?.component"
      :class="isCollapse ? 'admin-ui-side isCollapse' : 'admin-ui-side'"
    >
      <div v-if="!isCollapse" class="admin-ui-side-top">
        <h2>{{ isCollapse ? 'D' : $CONFIG.APP_NAME }}</h2>
      </div>
      <div class="admin-ui-side-scroll">
        <el-scrollbar>
          <el-menu :default-active="activeMenu" router :collapse="isCollapse" :unique-opened="accordion">
            <SubMenu :menu-list="subMenuList"></SubMenu>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="admin-ui-side-bottom" @click="">
        <el-icon>
          <el-icon-expand v-if="isCollapse" />
          <el-icon-fold v-else />
        </el-icon>
      </div>
    </div>
    <div class="admin-ui-body el-container">
      <div class="admin-ui-topbar">
        <ToolBarLeft></ToolBarLeft>
        <ToolBarRight></ToolBarRight>
      </div>
      <Main></Main>
    </div>
  </section>
</template>

<script setup lang="ts" name="layoutColumns">
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/modules/auth'
import { useGlobalStore } from '@/stores/modules/global'
import Main from '@/layouts/components/Main/index.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const globalStore = useGlobalStore()
const accordion = computed(() => globalStore.accordion)
const isCollapse = computed(() => globalStore.isCollapse)
const menuList = computed(() => authStore.showMenuListGet)
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)

const splitActive = ref('')
const currentTopMenu = ref<Menu.MenuOptions>()
const subMenuList = ref<Menu.MenuOptions[]>([])
watch(
  () => [menuList, route],
  () => {
    // 当前菜单没有数据直接 return
    if (!menuList.value.length) return
    splitActive.value = route.path
    const menuItem = menuList.value.filter((item: Menu.MenuOptions) => {
      return route.path === item.path || `/${route.path.split('/')[1]}` === item.path
    })
    if (menuItem.length > 0 && menuItem[0].children?.length) return (subMenuList.value = menuItem[0].children)
    subMenuList.value = []
  },
  {
    deep: true,
    immediate: true
  }
)

// change SubMenu
const changeSubMenu = (item: Menu.MenuOptions) => {
  splitActive.value = item.path
  currentTopMenu.value = item
  if (item.children?.length) return (subMenuList.value = item.children)
  subMenuList.value = []
  router.push(item.path)
}
</script>
